<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>培训机构</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/fonts/font-awesome.min.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">


</head>

<body>



    <!-- header -->
    <div>
        <div
            class="widget-default widget-body margin-b-5 padding-b-10 display-flex justify-content-between align-items-center">
            <div class="px-search mui-input-row mui-search" style="width: 88%;">
                <img src="../img/search-icon.png" alt="">
                <input class="mui-input-clear" type="text" name="" id="" placeholder="培训机构、地址">

            </div>
            <span class="font-16 gray">搜索</span>
        </div>

        <div class="widget-default padding-10 display-flex align-center justify-content-between margin-b-3">
            <div class="display-flex align-items-center justify-content-center width33" id="sele1">
                <span class="font-14 gray padding-r-10 elli1">全国</span>
                <span class="fa fa-angle-down gray"></span>
            </div>
            <div class="display-flex align-items-center justify-content-center width33" id="sele2">
                <span class="font-14 gray padding-r-10 elli1">全部分类</span>
                <span class="fa fa-angle-down gray"></span>
            </div>
            <div class="display-flex align-items-center justify-content-center width33" id="sele3">
                <span class="font-14 gray padding-r-10 elli1">默认排序</span>
                <span class="fa fa-angle-down gray"></span>
            </div>
        </div>
        <!-- 内容 -->
        <div class="widget-default widget-body display-flex margin-b-3 padding-b-10">
            <div class="position-img-l">
                <img src="../img/bg_default.png" alt="">
                <img src="../img/v.png" alt="">
            </div>
            <div class="display-flex flex-column margin-l-10 margin-t-f5">
                <p class="no-margin font-16 font-weight black1 elli1">杨凌农业云服务有限公司业云服务有限业云服务有限</p>
                <div class="padding-t-5 padding-b-5">
                    <span class="tuli-content1 font-14 tuli-bg">水果</span>
                    <span class="tuli-content1 font-14 tuli-bg">水果水果水果水果水果</span>
                </div>
                <p class="font-12 gray no-margin line-height-18">已培训：3 场<span class="padding-l-20">培训人数：242
                        人</span></p>
                <p class="font-12 gray no-margin line-height-18">地址：陕西省杨凌示范区</p>
            </div>
        </div>
        <!--  -->
        <div class="widget-default widget-body display-flex margin-b-3 padding-b-10">
            <div class="position-img-l">
                <img src="../img/bg_default.png" alt="">
                <img src="../img/v.png" alt="">
            </div>
            <div class="display-flex flex-column margin-l-10 margin-t-f5">
                <p class="no-margin font-16 font-weight black1 elli1">杨凌农业云服务有限公司</p>
                <div class="padding-t-5 padding-b-5">
                    <span class="tuli-content1 font-14 tuli-bg">水果</span>
                    <span class="tuli-content1 font-14 tuli-bg">水果水果水果水果水果</span>
                </div>
                <p class="font-12 gray no-margin line-height-18">已培训：3 场<span class="padding-l-20">培训人数：242
                        人</span></p>
                <p class="font-12 gray no-margin line-height-18">地址：陕西省杨凌示范区</p>
            </div>
        </div>
        <!--  -->

    </div>

    <ul class="widget-default widget-body seleshow" id="seleshow1">
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
        <li>你新技术你几班的</li>
    </ul>
    <ul class="widget-default widget-body seleshow" id="seleshow2">
        <li>1</li>
        <li>你班的</li>
        <li>你新你几班的</li>
        <li>你新技几班的</li>
        <li>几班的</li>
    </ul>
    <ul class="widget-default widget-body seleshow" id="seleshow3">
        <li>你新8班的</li>
        <li>你8几班的</li>
        <li>你6班的</li>
        <li>你6你几班的</li>
        <li>你新4的</li>
    </ul>


    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/mui/mui.js"></script>
    <script>
            $("#sele1").on("tap", function () {
                $("#seleshow2").hide()
                $("#seleshow3").hide()
                $("#sele2 span").removeClass("blue1");
                $("#sele3 span").removeClass("blue1");
                $("#sele2 fa").removeClass("rotat");
                $("#sele3 fa").removeClass("rotat");
                if ($("#seleshow1").is(":hidden")) {
                    $("#seleshow1").show()
                    $("#sele1 span").addClass("blue1");
                    $("#sele1 .fa").addClass("rotat");
                } else {
                    $("#seleshow1").hide()
                    $("#sele1 span").removeClass("blue1");
                    $("#sele1 .fa").removeClass("rotat");
                }
                $("#seleshow1 li").on("tap", function () {
                    $(this).siblings("li").removeClass("selected");
                    $("#seleshow1").hide()
                    $(this).addClass("selected");
                    $("#sele1 span").removeClass("blue1");
                    $("#sele1 .fa").removeClass("rotat");
                })
    
            })
    
            $("#sele2").on("tap", function () {
                $("#seleshow1").hide()
                $("#seleshow3").hide()
                $("#sele1 span").removeClass("blue1");
                $("#sele3 span").removeClass("blue1");
                $("#sele1 fa").removeClass("rotat");
                $("#sele3 fa").removeClass("rotat");
                if ($("#seleshow2").is(":hidden")) {
                    $("#seleshow2").show()
                    $("#sele2 span").addClass("blue1");
                    $("#sele2 .fa").addClass("rotat");
                } else {
                    $("#seleshow2").hide()
                    $("#sele2 span").removeClass("blue1");
                    $("#sele2 .fa").removeClass("rotat");
                }
                $("#seleshow2 li").on("tap", function () {
                    $(this).siblings("li").removeClass("selected");
                    $("#seleshow2").hide()
                    $(this).addClass("selected");
                    $("#sele2 span").removeClass("blue1");
                    $("#sele2 .fa").removeClass("rotat");
                })
    
            })
    
            $("#sele3").on("tap", function () {
                $("#seleshow1").hide()
                $("#seleshow2").hide()
                $("#sele1 span").removeClass("blue1");
                $("#sele2 span").removeClass("blue1");
                $("#sele1 fa").removeClass("rotat");
                $("#sele2 fa").removeClass("rotat");
                if ($("#seleshow3").is(":hidden")) {
                    $("#seleshow3").show()
                    $("#sele3 span").addClass("blue1");
                    $("#sele3 .fa").addClass("rotat");
                } else {
                    $("#seleshow3").hide()
                    $("#sele3 span").removeClass("blue1");
                    $("#sele3 .fa").removeClass("rotat");
                }
                $("#seleshow3 li").on("tap", function () {
                    $(this).siblings("li").removeClass("selected");
                    $("#seleshow3").hide()
                    $(this).addClass("selected");
                    $("#sele3 span").removeClass("blue1");
                    $("#sele3 .fa").removeClass("rotat");
                })
    
            })
        
        </script>

</body>

</html>